<template>
  <div style="width: 100%;height: 400px;overflow: hidden;" ref="user_login_echarts"></div>
</template>

<script>
import time from "../utils/time"
import {getUserRegisterTime} from "../utils/api";
const echarts = require('echarts');
export default {
  name: "UserNumberEcharts",
  data(){
    return {
      XArr:[],
      YArr:[]
    }
  },
  methods: {
    initCharts () {
      let myChart = echarts.init(this.$refs.user_login_echarts, null);
      window.onresize = function () {
        myChart.resize();
      };
      // 绘制图表
      myChart.setOption({
        title: {
          text: '平台用户数量',
          left: '5%',
          top:'3%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.XArr
        },
        yAxis: {
          type: 'value'
        },
        series:
            {
              name: '平台人数',
              data: this.YArr,
              type: 'line',
              smooth: true,
              /*label: {
                show: false,
                position: 'top',
                textStyle: {
                  fontSize: 16
                }
              },*/
              /*emphasis:{
                label:{
                  show:true
                }
              }*/

            }
      });
    }
  },
  mounted () {
    getUserRegisterTime().then(respose=>{
      if(respose.status==200){
        let arr = [...respose?.body];
        let obj = {}
        let yarr = [0];
        arr.map(v=>{
          v.zcsj=time.timestampToTime(v.zcsj,3);
          obj[v.zcsj]?obj[v.zcsj]++:obj[v.zcsj]=1
        })
        this.XArr=Object.keys(obj);
        this.XArr.unshift("2022-02-18")
        Object.values(obj).map(v=>{
          yarr.push(yarr[yarr.length-1]+v)
        })
        this.YArr=yarr
        this.initCharts();
      }else{
        this.$message.error(respose?.msg);
      }
    })
  },
}
</script>

<style scoped>

</style>
